<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/js/Grid/css/grid.css">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/Grid/js/grid.js"></script>
    <script>
        window.addEventListener("message", evt => {
            var data = evt.data;
            schema = data.schema;
            view = data.view;
            loadGrid();
        });
    </script>
</head>

<body>
    <div id="grid"></div>
    <script>
        var schema, view;
        $(function () {
            initColumnsGrid();
        });
        var data;
        var gridColumns;
        function initColumnsGrid() {
            gridColumns = new Grid("grid", {
                isFixHead: true,
                sizeColumn: true,
                height: 100,
                isPage: false,
                colWidths: [
                    30, 100, 100, 50, 150
                ],
                headArr: [
                    [
                        { text: "序号" },
                        { text: "列名", order: { type: "none", name: "name", rank: 1 } },
                        { text: "类型" },
                        { text: "?可空" },
                        { text: "说明" }
                    ]
                ],
                columnArr: [
                    { type: "index" },
                    {
                        type: "lab", name: "name"
                    },
                    { type: "lab", name: "typeString" },
                    {
                        type: "lab", name: "isNullAble", formatter: function (col, tdconf) {
                            if (col.isNullAble) {
                                return "true";
                            } else {
                                return `<font color='red'>false</font>`;
                            }
                        }
                    },
                    {
                        type: "lab", name: "desc", cutLen: 15, title: "desc", dblClick: function (text, data, tr, div) {
                            var desc = window.prompt("请输入列说明:", data.desc);
                            console.log(arguments);
                            if (desc == null) {
                                //取消编辑
                                return;
                            }
                            var name = data.name;
                            var schemaName = schema;
                            var viewName = view;
                            showLoading();
                            $.post("/api/manage/UpdateViewColumnDescription", { name, schemaName, viewName, desc }).done(res => {
                                if (res.success) {
                                    div.html(desc);
                                    data.desc = desc;
                                } else {
                                    alert(res.message);
                                }
                            }).always(hideLoading);
                        }
                    }
                ],
                onQuery: function (pageIndex, pageSize, orders) {
                    if (orders.length > 0) {
                        initColumns(orders);
                    }
                }
            });
            gridColumns.init({ data: [] });
        }
        function initColumns(orders) {
            var columns = data.columns;
            columns = gridColumns.order(columns, orders);
            gridColumns.init({ data: columns });
            var height = document.body.clientHeight - 10 - 35;
            gridColumns.setHeight(height + "px");
        }
        function loadGrid() {
            showLoading();
            $.post("/api/manage/GetViewDetail", { schema, view }, function (res) {
                data = res.data;
                initColumns();
            }).always(hideLoading);
        }
    </script>
</body>

</html>